<template>
    <div class="index-box">
        <div class="wel-1">
            <el-input class="s-1" placeholder="输入并搜索" v-model="litticeParam.latticeName"
                clearable @clear="clearSearchData" @keyup.enter.native="searchDataEvent" prefix-icon="el-icon-search">
            </el-input>
        </div>
        <div class="index-main" @mouseover="showPageIcon" @mouseout="hidePageIcon">
            <!-- 左侧上一页组件 -->
            <div class="Up-Icon">
                <UpPageComponent v-show="showIcon" @showPreviousPage="showPreviousPage" class="icon"/>
            </div>
            <div  class="grid-content">
                <div class="latt-child" v-for="(item,index) in latticeDataList" :key="index">
                    <img :src="item.latticeCover" alt="fail" width="100%" height="100%" @contextmenu.prevent="mouseRightClick($event,item)">
                    <span class="main-title">
                        <a :href="item.latticeSkipWebsite" target="_blank">{{item.latticeName}}</a>
                    </span>
                </div>
                <div class="avatar-uploader" @click="addSourceEvent">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </div>
            </div>
            <div class="do-icon">
                <DoPageComponent @showNextPage="showNextPage" v-show="showIcon" class="icon"/>
            </div>
        </div>

        <!-- 分页 -->
        <div class="page-main">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="litticeParam.page"
                :page-sizes="[30, 35, 40]"
                :page-size="litticeParam.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totals">
            </el-pagination>
        </div>

        <!-- 编辑对话框 -->
        <el-dialog :visible.sync="editDialogVisible">
            <EditData :latticeObject="currentData" @closeDialog="receiveEditMsg"/>
        </el-dialog>
        <!-- 添加网格对话框 -->
        <el-dialog :visible.sync="addDialogVisible">
            <AddLatticeData @closeAddDialog="receiveAddMsg"/>
        </el-dialog>

    </div>
</template>

<script>
import EditData from './EditData.vue';
import AddLatticeData from './AddLatticeData.vue';
import UpPageComponent from './UpPageComponent.vue'
import DoPageComponent from './DoPageComponent.vue'
export default {
    name:"index",
    components:{
        EditData,
        AddLatticeData,
        UpPageComponent,
        DoPageComponent
    },
    data(){
        return{
            litticeParam:{
                latticeName:"",
                page:1,
                size:100,
            },
            latticeDataList:[],
            totals:0,
            editDialogVisible:false,
            addDialogVisible:false,
            currentData:{},
            showIcon:false
        }
    },
    created(){
        this.getAllLatticeNoteByPage()
    },
    methods:{
        getAllLatticeNoteByPage(){
            this.$http.post("/latticeNoteOperator/latticeLike/getAllLatticeNoteByPage",this.litticeParam).then(res=>{
                if(res.data.code === "0000"){
                    this.latticeDataList = res.data.data.latticeResultList
                    this.totals=res.data.data.totals
                }else{
                    this.$message.error("获取网格失败,请刷新重试")
                }
            }).catch(err =>{
                this.$message.error("获取网格失败:"+err)
            })
        },
        // 清空搜索框
        clearSearchData(){
            this.getAllLatticeNoteByPage()
        },
        // 搜索
        searchDataEvent(){
            this.getAllLatticeNoteByPage()
        },
        //添加资源
        addSourceEvent(){
            this.addDialogVisible=true
        },
        //鼠标右击菜单事件
        mouseRightClick(event,item){
            const that = this
            window.onkeydown = function (event) {
                /* 解决兼容性问题 */
                event = event || window.event;
                if (event.keyCode === 82) {
                    location.reload();
                }
            };

            this.$contextmenu({
                items: [
                
                { label: "前进(F)", disabled: true },
                { 
                    label: "重新加载(R)", 
                    divided: true, 
                    icon: "el-icon-refresh" ,
                    onClick: () => {                       
                        location.reload();
                        this.$message.warning("敬请期待");
                    }
                },
                { label: "另存为(A)..." },
                {
                    label: "截取网页(R)",
                    minWidth: 0,
                    children: [
                        {
                            label: "截取可视化区域(Q)",
                            onClick: () => {
                                this.$message.warning("敬请期待");
                            }
                        },
                        { 
                            label: "截取全屏",
                            onClick: () => {
                                this.$message.warning("敬请期待");
                            } 
                        }
                    ]
                },
                { 
                    label: "编辑", 
                    icon: "el-icon-edit",
                    onClick:()=>{
                        // this.$message.success("编辑数据")
                        this.currentData = item
                        this.editDialogVisible=true
                    }
                },
                { 
                    label: "移除", 
                    icon: "el-icon-delete",
                    onClick:()=>{
                        this.deleteLattice(item.latticeId)
                        //this.$message.error("删除数据")
                    }
                }
                ],
                event, // 鼠标事件信息
                customClass: "custom-class", // 自定义菜单 class
                zIndex: 10, // 菜单样式 z-index
                minWidth: 200 // 主菜单最小宽度
            });
            return false;
        },
        //接收编辑组件发送的消息
        receiveEditMsg(msg){
            if(msg){
                this.editDialogVisible=false
            }
            this.getAllLatticeNoteByPage()
        },
        receiveAddMsg(msg){
            if(msg){
                this.addDialogVisible=false
            }
            this.getAllLatticeNoteByPage()
        },
        //显示上一页图标 
        showPageIcon(){
            this.showIcon = true
        },
        //点击上一页
        showPreviousPage(msg){
            if(!msg){
                return
            }
            if(this.litticeParam.page === 1){
                return this.$message.warning("当前已是第一页")
            }
            this.litticeParam.page = this.litticeParam.page - 1
            this.getAllLatticeNoteByPage()
        },
        // 点击下一页
        showNextPage(msg){
            if(!msg){
                return
            }
            //计算出最大页数
            let maxPage;
            if(this.totals%this.litticeParam.size === 0){
                maxPage = parseInt(this.totals / this.litticeParam.size)
            }else{
                //向下取整
                maxPage = Math.floor(this.totals / this.litticeParam.size) + 1
            }
            if(this.litticeParam.page === maxPage || maxPage === 0){
                return this.$message.warning("当前已是最后一页")
            }
            this.litticeParam.page = this.litticeParam.page + 1
            this.getAllLatticeNoteByPage()
        },
        hidePageIcon(){
            this.showIcon = false
        },
        deleteLattice(latticeId) {
            this.$confirm('此操作将永久删除该网格, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass:'msgBox'
            }).then(() => {
                this.$http.get(`/latticeNoteOperator/latticeLike/deleteLatticeNoteInfo/${latticeId}`).then(res=>{
                    if(res.data.code === "0000" && res.data.data){
                        this.$message.success('删除成功!');
                        this.getAllLatticeNoteByPage()
                    }else{
                        this.$message.error("删除失败,请联系管理员")
                    }
                }).catch(err =>{
                    this.$message.error("删除失败:"+err)
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        //分页
        handleSizeChange(val) {
            this.litticeParam.size=val
            this.getAllLatticeNoteByPage()
        },
        handleCurrentChange(val) {
            this.litticeParam.page=val
            this.getAllLatticeNoteByPage()
        }
    }
}
</script>

<style scoped>
@import url("../assets/css/index.css");
.index-box .wel-1 /deep/ .el-input__inner{
    border-radius: 25px;
    height: 50px;
    font-size: large;
}
.page-main /deep/ .el-pagination__total , .page-main /deep/ .el-pagination__jump{
    color: rgb(167, 47, 71);
}

.msgBox{
    margin-top: -200px;
} 


</style>